import { LitElement, html } from "lit";

class Updated extends LitElement {
    static get properties() {
        return {
            focused: { type: Boolean }
        };
    }

    constructor() {
        super();

        this.focused = false;
    }

    render() {
        return html`
      <input
        id="amountInput"
        type="number"
        name="amount"
        @blur="${() => (this.focused = false)}"
      />
      Focused: ${this.focused}
      <button @click="${() => (this.focused = true)}">Focus input</button>
    `;
    }

    //渲染函数应该保持纯净，没有副作用。更新后的回调被调用
    //每次元素的DOM被更新和呈现时。使用它来观察属性变化并对其采取行动。
    updated(changedProperties) {
        if (changedProperties && changedProperties.get("focused") === false) {
            // Focus the amount input field, each time focused changes from false
            this.shadowRoot.getElementById("amountInput").focus();
        }
    }
}

customElements.define("updated-demo", Updated);
